<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>4.App根组件</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app"></div>

    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        let Hello = {
            template:`
                <h1 style='color:red;'>这是hello组件</h1>
            `
        }

        //全局注册一个组件,谨慎使用
        Vue.component("Hello",Hello);

        //1. 创建组件
        let News = {
            name:"News",  //指定vue开发者工具中显示的名字
            template:`
            <div>
                <Hello/>
                <h1>新闻标题：{{title}}</h1>
                <h1>{{hot}}</h1>
                <h1>阅读量：{{count}}</h1> 
                <button @click='add'>+++++++</button>
            </div>
            `,
            data(){
                return{
                    title:"asjfgjskdgf",
                    hot:"热门",
                    count:1000
                }
            },
            methods:{
                add(){
                    this.count+= 1000;
                }
            }
        }


        let Student ={
            name:"Student",
            template:`
            <div>
                <Hello/>
                <h1>姓名：{{name}}</h1>
                <h1>性别：{{gender}}</h1>
                <h1>年龄：{{age}}</h1> 
                <button @click='add'>+++++++</button>
            </div>
            `,
            data(){
                return{
                    name:"张三",
                    gender:"男",
                    age:18
                }
            },
            methods:{
                add(){
                    this.age++;
                }
            }
        }


        //App根组件
        let App = {
            name:"App",
            components:{
                Student,
                News
            },
            template:`
                <div>
                    <Student/>
                    <News/>
                </div>
            `
        }

        //创建vm实例
        new Vue({
            el:"#app",
            components:{
                App
            },
            template:"<App/>"
        })
    </script>
</html>